<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>直播预览_epg</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="http://static.lego.iqiyi.com/lego.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/ui.css?v=2014122229711" type="text/css" media="all">
    <link rel="stylesheet" href="./css/pps.css?v=2014122229711" type="text/css" media="all">

    <script type="text/javascript" src="./js/core.js?v=2014122229711"></script>
    <script type="text/javascript" src="./js/ui.js?v=2014122229711"></script>
    <script type="text/javascript" src="./js/qui.js?v=2014122229711"></script>
</head>

<body>
<style>
    a, .close {
        color: #fff;
        fontweight: bold;
        text-shadow: 0 1px 0 #000;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    a:hover, a:focus, .close:hover,
    .close:focus {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        opacity: 0.7;
        filter: alpha(opacity=70);
    }
</style>
<script>

    $("body").css({"background-color":"#191919","height": $(window).height()});

    $(window).resize(function(){

        $("body").css({"background-color":"#191919","height": $(window).height()});

    });

    var Storage = {
        setItem : function(k,v){
            var strValue = JSON.stringify(v);
            localStorage.setItem(k,strValue);
        },
        removeDataOfItem : function(k,id){
        //localStorage.removeItem(k);
            var monitorArr = Storage.getItem(k);
            for(var i in monitorArr)
            {
                if(monitorArr[i]['id']==id)
                {
                    monitorArr.splice(i, 1);
                    break;
                }
            }
            Storage.setItem(k,monitorArr);
        },
        getItem : function(k){
            return JSON.parse(localStorage.getItem(k));
        }
    };

    function generatePlayer(src)
    {

        var html = [];
        html.push("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' type='application/x-shockwave-flash' name='StrobeMediaPlayback4' width='450' height='250' id='StrobeMediaPlayback4' >");
        html.push("<param name='quality' value='high' />");
        html.push("<param name='bgcolor' value='#000000' />");
        html.push("<param name='allowfullscreen' value='true' />");
        html.push("<param name='flashvars' value= 'src="+src+"&autoHideControlBar=true&streamType=live&autoPlay=true&verbose=true'/>");
        html.push("<embed wmode='opaque' src='swfs/StrobeMediaPlayback.swf' width='450' type='application/x-shockwave-flash' id='StrobeMediaPlayback4' height='250' quality='high' bgcolor='#000000' name='StrobeMediaPlayback4' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer' flashvars='&src="+src+"&autoHideControlBar=true&streamType=live&autoPlay=true&verbose=true'> </embed>");
        html.push("</object>");

        return html.join("");
    }


    if(window.addEventListener){
        window.addEventListener("storage",function(e){previewChange(e);},false);
    }
    else{
        document.attachEvent("onstorage",function(e){previewChange(e);});
    }

    function previewChange(e)
    {
        var data = JSON.parse(e.newValue)[0];
        addPreview(data);
    }

    var lkey = "monitor";

    function addPreview(data){

        var id  = data['id'],
                player = generatePlayer(data['rtmp']);
        $("#id"+id).remove();

        var html = [];
        html.push('<div class="span6" style="margin:2px;" id="id'+id+'">');
        html.push('<div style="margin-top:10px;padding-right:10px;">');
        html.push('<button type="button" class="close" data-dismiss="modal" onclick="Storage.removeDataOfItem(\''+lkey+'\','+id+');$(\'#id'+id+'\').remove();"><span aria-hidden="true">×</span></button>');
        html.push('<a href="'+data['dotUrl']+'" target="_blank">'+data['name']+'</a>');
        html.push('</div>');
        html.push('<div style="position:relative;">');
        html.push(player);
        html.push('<div onclick="window.open(\''+data['dotUrl']+'\',\''+data['name']+'\')" style="width:450px;cursor:pointer;height:210px;background-color:transparent;position:absolute;left:0px;top:0px;"></div></div>');
        html.push('</div>');

        $(".container-fluid").prepend(html.join(""));
    }

    $(document).ready(function(){
        var data = Storage.getItem(lkey);

        $.each(data,function(i,item){
            addPreview(item);
        });
    });


</script>


<div class="container-fluid">
</div>
</div>
</body>
</html>